<script setup name="myCard">
import { defineProps, ref } from 'vue';

const props = defineProps({
  // 标题右边的内容
  rigthSize: {
    type: String,
  },
  // 标题高度
  titleHeight: {
    type: String,
    default: '100',
  },
  // 全部卡片容器padding
  cardPadding: {
    type: String,
    default: '0px 0px 0px 0px',
  },
  // 卡片高度
  cardHeight: {
    type: String,
    default: '100',
  },
});

// 标题右侧文字
const rigthSize = ref(props.rigthSize);
// 标题高度
const titleHeight = ref(props.titleHeight);
// 全部卡片容器padding
const cardPadding = ref(props.cardPadding.split(' '));
// 卡片容器高度
const cardHeight = ref(props.cardHeight);
</script>

<template>
  <div class="card-main">
    <!-- 标题 -->
    <div
      class="title"
      :style="`height: ${ titleHeight }px`"
    >
      <!-- 标题插槽 -->
      <div>
        <slot name="title"/>
      </div>
      <!-- 方法rigth-size有就显示 -->
      <div
        class="rigth"
        v-show="rigthSize"
      >
        <div>{{ rigthSize }}</div>
        <div>
          <el-icon style="vertical-align: -15%"><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
    <!-- 卡片内容 -->
    <div
      :style="[ `padding: ${ cardPadding[0] }px ${ cardPadding[1] }px ${ cardPadding[2] }px ${ cardPadding[3] }px`, `height: ${ cardHeight }px` ]"
      class="my-card-container"
    >
      <!-- 小卡片 -->
      <slot name="card"/>
      <!-- <div
        v-for="item in data.children"
        :key="item.id"
        class="card-content"
        :class="[animation ? 'animation' : '', cardChangeSize ? 'card-content-hover' : '']"
      >
        <div>
          <img :style="`height: ${ cardImg }px`" :src="item.picture">
        </div>
        <div>

        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .card-main {
    // padding: 0 130px;
    // height: 100px;
    background-color: white;

    // title居中
    .title {
      position: relative;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      .rigth {
        position: absolute;
        top: 30px;
        right: 10px;
        display: flex;
        align-items: center;
        color: #999;
        font-size: 14px;

        div:nth-child(1) {
          margin-right: 2px;
        }

        &:hover {
          cursor: pointer;
          color: $c;
        }
      }
    }

    // 卡片内容大容器
    .my-card-container {
      // height: 330px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);


      // 小卡片鼠标移入动画
      .animation {
        transform: translateY(0px);
        box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0);
        transition: all 0.3s linear;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
        }
      }

      &:hover {
        cursor: pointer;
      }

    }

  }


</style>
